<template>
  <div style="height: 100%;">
    <img
      src="@/assets/login_bg.png"
      width="396px"
      height="646px"
      style="position:absolute;left:0;bottom:0;z-index:-1;"
    />
    <div class="rootview">
      <img src="@/assets/huadao_logo.png" width="100px" height="100px;" style="margin-top:70px;" />
      <p class="title">仓储系统</p>

      <van-field
        v-model="email"
        left-icon="manager"
        type="text"
        placeholder="请输入用户名"
        @input="onEmailInput"
        style="width:364px;margin:auto"
      >
        <!-- <span slot="button">{{emailSuffix}}</span> -->
      </van-field>
      <van-field
        style="width:364px;margin:auto;margin-top:30px;"
        v-model="pwd"
        left-icon="lock"
        type="password"
        placeholder="请输入密码"
        class="pwd"
      />

      <van-button
        style="margin-top:100px"
        type="default"
        size="large"
        @click="login({ Email: email, Password: pwd })"
      >登录</van-button>
    </div>
  </div>
</template>

<script>
import http from "@/utils/request";
import api from "@/utils/api";
import { mapGetters, mapActions } from "vuex";
import consts from "@/utils/consts";

export default {
  name: "Login",
  data() {
    return {
      email: "",
      pwd: "",
      emailSuffix: consts.emailSuffix
    };
  },
  methods: {
     ...mapActions(["login"]),
    // login() {
    //   let params = { E mail: this.email, Password: this.pwd };
    //   this.$store.dispatch("login", params);
    // }
    onEmailInput(value) {
      this.email = value.replace(/\s*/g, "");
    }
  },
  created() {
    this.email = this.$store.getters.email;
    this.pwd = this.$store.getters.password;
  }
};
</script>
<style lang="scss" scoped>
.rootview {
  background: rgba(13, 40, 97, 0.85);
  height: 100%;
}
.title {
  font-size: 30px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 42px;
  padding: 0;
  margin-bottom: 71px;
  margin-top: 18px;
  text-align: center;
}
.van-field {
  background-color: transparent;
  font-size: 20px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(207, 207, 207, 1);
  line-height: 28px;
  letter-spacing: 1px;
}
/deep/ .van-field__button {
  color: white;
  // float: right;
  align-self: flex-end;
  // flex: 0 0 auto;
  padding: 0;
}

/deep/ .van-field__control {
  color: white;
}
/deep/ .pwd input {
  width: 100%;
}
.van-field__body {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.van-button {
  width: 364px;
  height: 54px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  border: 1px solid rgba(223, 223, 223, 1);
  color: white;
}
</style>